<template>
	<view class="comment-detail">
		<view
			class="post-detail"
			v-if="postDetail"
			@click="$_to('post/detail?pid=' + postDetail.pid)">
			<view class="post-detail-top">
				<view class="post-detail-top-info">{{$t('contentViewOriginal')}}</view>
				<view class="post-detail-top-avatar">
					<image :src="postDetail.author.avatar" mode="widthFix"></image>
				</view>
				<view class="post-detail-top-content">
					<text>{{postDetail.author.nickname}}</text><text>{{postDetail.title?postDetail.title:$_filterHtml(postDetail.content)}}</text>
				</view>
			</view>
		</view>
		<view class="comment-detail" v-if="commentDetail">
			<view class="comment-detail-author">
				<view class="comment-detail-avatar">
					<image :src="commentDetail.author.avatar" mode="widthFix"></image>
				</view>
				<view class="comment-detail-author-center">
					<view class="author-center-top">
						<text class="comment-detail-nickname" :style="'color:'+commentDetail.author.nicknameColor+';'">{{commentDetail.author.nickname}}</text>
						<text class="comment-detail-roleName">{{commentDetail.author.roleName}}</text>
					</view>
					<view class="author-center-bottom">
						{{commentDetail.createdTimeAgo}}
						<view
							@click.stop="cliclGeotagButton(commentDetail.geotag.latitude,commentDetail.geotag.longitude)"
							v-if="commentDetail.geotag">
							<text class="iconfont icon-dingwei1"></text>
							<text>{{commentDetail.geotag.name}}</text>
						</view>
					</view>
				</view>
				<view class="author-center-right" @click="$_to('user/detail?uid=' + commentDetail.author.uid)">
					<view>{{$t('view')}}</view>
				</view>
			</view>
			<view class="comment-detail-content">
				<mp-html
					:tag-style="contentTagStyle"
					:content="$_content(commentDetail.content)"
					:selectable="true"/>
			</view>
			<view
				v-if="commentDetail.files.images.length||commentDetail.files.videos.length||commentDetail.files.audios.length"
				class="_content-1-file">
				<view class="_content-1-file-box">
					<template v-if="commentDetail.files.images.length">
						<view
							@click="$_picturePreview(index,commentDetail.files.images)"
							v-for="(img,index) in commentDetail.files.images">
							<image :src="img.imageSquareUrl" mode="widthFix"></image>
						</view>
					</template>
					<template v-if="commentDetail.files.videos.length">
						<view
							@click="$_to('pages/video?url=' + encodeURIComponent(video.videoUrl))"
							v-for="(video,index) in commentDetail.files.videos">
							<text class="iconfont icon-arrow-right-filling"></text>
						</view>
					</template>
				</view>
				<template v-if="commentDetail.files.audios.length">
					<global-audio
						v-for="audio in commentDetail.files.audios"
						Css="width:300rpx;margin-top:15rpx;"
						:Url="audio.audioUrl"></global-audio>
				</template>
			</view>
			<view class="comment-like-dislike">
				<view
					@click="clickLikeDislikeButton(commentDetail,'like')"
					:style="commentDetail.interaction.likeStatus?'color: #409EFF;':''"
					v-if="commentDetail.interaction.likeEnabled"><text :style="commentDetail.interaction.likeStatus?'color: #409EFF;':''" class="iconfont icon-good"></text>{{commentDetail.likeCount}}</view>
				<view
					@click="clickLikeDislikeButton(commentDetail,'dislike')"
					:style="commentDetail.interaction.dislikeStatus?'color: #409EFF;':''"
					v-if="commentDetail.interaction.dislikeEnabled"><text :style="commentDetail.interaction.dislikeStatus?'color: #409EFF;':''" class="iconfont icon-bad"></text>{{commentDetail.dislikeCount}}</view>
			</view>
			<view
				v-if="commentDetail.controls.canEdit||commentDetail.controls.canDelete||commentDetail.manages.length"
				class="comment-administration">
				<view
					v-if="commentDetail.controls.canEdit"
					@click.stop="clickEditCommentButton(commentDetail.cid)">编辑</view>
				<template v-if="commentDetail.manages.length">
					<view
						v-for="manages in commentDetail.manages"
						@click.stop="clickManagesButton(manages,commentDetail.cid)">
						{{manages.name}}
					</view>
				</template>
				<view
					v-if="commentDetail.controls.canDelete"
					@click.stop="clickDelCommentButton(commentDetail)">删除</view>
			</view>
			<view class="comment-detail-textarea">
				<textarea
					:placeholder="placeholder"
					placeholder-style="color:#C0C4CC;"
					maxlength="-1"
					v-model="content"
					:focus="focus"
					@blur="blur"
					auto-height
					show-confirm-bar="{{false}}"></textarea>
				<view class="comment-detail-textarea-bottom">
					<view class="comment-detail-textarea-bottom-left">
						<view @click="emojiStatus = true">
							<text class="iconfont icon-smile"></text>
						</view>
					</view>
					<view class="comment-detail-textarea-bottom-right">
						<view @click="clickSubmitButton">{{$t('submit')}}</view>
					</view>
				</view>
			</view>
			<view class="list-comment">
				<template v-if="listStatus === 'success'">
					<view class="list-comment-orderType">
						<view class="list-comment-orderType-box">
							<view
								:class="orderType==='createdTime'?'list-comment-orderType-box-hover':''"
								@click="clickOperatingButton('createdTime')">{{$t('contentNewList')}}</view>
							<view
								:class="orderType==='comment'?'list-comment-orderType-box-hover':''"
								@click="clickOperatingButton('comment')">{{$t('contentHotList')}}</view>
						</view>
					</view>
					<view
						class="for"
						v-for="item in list"
						@click="clickSubCommentButton(item)">
						<view class="_avatar">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view class="_right">
							<view class="_right-nickname-roleName">
								<text
									class="_nickname"
									:style="'color:'+item.author.nicknameColor+';'">
									{{item.author.nickname}}</text>
								<text class="_roleName">{{item.author.roleName}}</text>
								<view
									v-if="item.controls.canDelete||item.manages.length"
									class="_administration">
									<view style="width: 1px;height: 22rpx;background: #EBEEF5;padding: 0;margin-left: 15rpx;"></view>
									<template v-if="item.manages.length">
										<view
											v-for="manages in item.manages"
											@click.stop="clickManagesButton(manages,item.cid)">
											{{manages.name}}
										</view>
									</template>
									<view
										v-if="item.controls.canDelete"
										@click.stop="clickDelCommentButton(item)">删除</view>
								</view>
							</view>
							<view class="_right-content">
								<view
									class="_right-content-replyToComment"
									v-if="item.replyToComment">
									<view class="_right-content-replyToComment-top">
										<text>{{$t('comments')}}</text>
										<text>{{item.replyToComment.author.nickname}}</text>
										<text>|</text>
										<text>{{$t('contentPublishedOn')}}</text>
										<text>{{item.replyToComment.createdTimeAgo}}</text>
									</view>
									<view class="_right-content-replyToComment-bottom">
										<mp-html
											style="opacity: .5;"
											:tag-style="contentTagStyleSub"
											:content="$_content(item.replyToComment.content)"
											:selectable="true"/>
									</view>
								</view>
								<view class="_content-1">
									<mp-html
										:content="$_content(item.content)"
										:selectable="true"/>
								</view>
								<view class="_content-1-time">{{item.createdTimeAgo}}</view>
								<view class="_content-2" v-if="item.previewComments.length">
									<view
										class="_content-2-for"
										v-for="previewComments in item.previewComments">
										<text class="_content-2-for-nickname">{{previewComments.author.nickname}}</text>
										<text class="_content-2-for-content">{{$_filterHtml(previewComments.content)}}</text>
									</view>
									<view class="_content-2-for-more">
										{{$t('modifierCount')}} {{item.commentCount}} {{$t('contentCommentCountDesc')}} <text class="iconfont icon-arrow-right"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view
						class="page-more"
						@click="clickMoreButton">
						{{listPageText}}
					</view>
				</template>
				<template v-if="listStatus === 'loading'">
					<global-loading></global-loading>
				</template>
				<template v-if="listStatus === 'empty'">
					<global-empty></global-empty>
				</template>
			</view>
		</view>
		<!-- 选择表情 -->
		<view v-if="emojiStatus" class="global-bottom-to-top-pop-up">
			<view class="_top" @click="emojiStatus = false"></view>
			<view class="_bottom">
				<view class="_title">
					<text class="_title-text">{{$t('editorStickers')}}</text>
					<view @click="emojiStatus = false"><text class="iconfont icon-close-bold"></text></view>
				</view>
				<view class="select-emoji-box">
					<view class="_box-left">
						<scroll-view scroll-y>
							<view @click="clickSwitchEmojiButton('emoji','')"
								:class="emojiHover == 'emoji'?'_hover':''">
								Emoji
							</view>
							<view
								@click="clickSwitchEmojiButton(item.code,item)"
								:class="emojiHover == item.code?'_hover':''"
								v-for="item in emojiCategories">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="_box-right">
						<scroll-view scroll-y>
							<view class="_emoji">
								<template v-if="emojiHover == 'emoji'">
									<view
										@click="clickEmojiButton(item)"
										v-for="item in editorConfigJSON.emoji"
										class="_emoji-for">
										<text>{{item}}</text>
									</view>
								</template>
								<template v-else>
									<view
										@click="clickEmojiButton(item.codeFormat)"
										v-for="item in emojiNativeList"
										class="_emoji-for">
										<view>
											<global-lazy-load-image height="65rpx" :image="item.image"
												:imgMode='"widthFix"'></global-lazy-load-image>
										</view>
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cid:"",
				subCid:"",
				pid:"",
				postDetail:null,
				commentDetail:null,
				placeholder:this.$t('writeComments'),
				content:"",
				emojiStatus: false, //--------表情弹窗
				emojiHover: "emoji", //-------当前表情分类
				emojiCategories: [], //-------原生表情分类
				emojiNativeList: [], //-------原生表情列表
				focus:false,
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore'),
				orderType:"createdTime",
				contentTagStyle:{
					p: "font-size:32rpx;line-height: 60rpx;word-break: break-all;",
					a: "font-size:32rpx;text-decoration: underline;",
					pre: "white-space:pre;background: #000000;color: #FFFFFF;overflow:scroll;font-size: 22rpx;padding: 25rpx;border-radius: 10rpx;margin: 20rpx 0;",
					ul: "padding:0 0 0 35rpx;",
					li: "list-style-type:circle;word-break: break-all;"
				},
				contentTagStyleSub:{
					p: "font-size:32rpx;line-height: 60rpx;word-break: break-all;color: #acacb4;",
					a: "font-size:32rpx;text-decoration: underline;color: #acacb4;",
					pre: "white-space:pre;background: #000000;color: #FFFFFF;overflow:scroll;font-size: 22rpx;padding: 25rpx;border-radius: 10rpx;margin: 20rpx 0;color: #acacb4;",
					ul: "padding:0 0 0 35rpx;color: #acacb4;",
					li: "list-style-type:circle;word-break: break-all;color: #acacb4;"
				}
			}
		},
		onShow() {
			// 插件回调
			if(uni.getStorageSync('extendWebView')){
				uni.removeStorageSync('extendWebView');
				uni.setStorageSync('noticeCommentDeleteSuccess', 'update');
				uni.navigateBack()
			}
			// 编辑后的回调
			if(uni.getStorageSync('editorPublishSuccess')){
				uni.removeStorageSync('editorPublishSuccess');
				this.getPostDetail();
			}
		},
		onLoad(e) {
			this.cid = e.cid;
			this.getCommentDetail();
			
		},
		methods: {
			getCommentDetail(){
				this.$_request(
					"GET",`/api/fresns/v1/comment/${this.cid}/detail`,
					{
						
					},
					(res) => {
						this.commentDetail = res.data.data.detail;
						this.pid = this.commentDetail.replyToPost.pid;
						this.getPostDetail();
						// 获取表情
						this.getSticker();
						this.getList();
					}
				)
			},
			getPostDetail(){
				this.$_request(
					"GET",`/api/fresns/v1/post/${this.pid}/detail`,
					{
						"filterType":"whitelist",
						"filterKeys":"pid,title,content,group,author",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"gid,name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"nickname,avatar",
					},
					(res) => {
						this.postDetail = res.data.data.detail;
						
					}
				)
			},
			getSticker(){
				this.$_request(
					"GET", "/api/fresns/v1/global/stickers", {},
					(res) => {
						this.emojiCategories = res.data.data;
					}
				)
				uni.request({
					url: this.$_configFile() + "editor.json",
					success: (res) => {
						this.editorConfigJSON = res.data;
					}
				})
			},
			// 左侧切换表情按钮
			clickSwitchEmojiButton(type, item) {
				this.emojiHover = type;
				if (type != 'emoji') {
					this.emojiNativeList = item.stickers;
				}
			},
			// 选中表情
			clickEmojiButton(e) {
				this.content += ` ${e} `;
				this.emojiStatus = false;
				this.commentContentFocus = true;
			},
			clickSubmitButton(){
				uni.showLoading();
				this.$_request(
					"POST",`/api/fresns/v1/editor/comment/publish`,
					{
						"commentPid":"",
						"commentCid":this.subCid?this.subCid:this.cid,
						"content":this.content
					},
					(res) => {
						this.subCid = "";
						this.placeholder = this.$t('writeComments');
						uni.hideLoading();
						if(res.data.code === 0){
							this.emojiStatus = false;
							this.content = "";
							this.commentContentFocus = false;
							this.getList();
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
						}
					}
				)
			},
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/comment/list",
					{
						"cid":this.cid,
						// "filterType":"whitelist",
						// "filterKeys":"cid,author,content,createdTimeAgo,previewComments,commentCount,replyToComment",
						// "filterAuthorType":"whitelist",
						// "filterAuthorKeys":"uid,nickname,roleName,nicknameColor,avatar",
						// "filterPreviewCommentType":"whitelist",
						// "filterPreviewCommentKeys":"content,author.nickname",
						// "filterReplyToCommentType":"whitelist",
						// "filterReplyToCommentKeys":"cid,content,author.nickname,createdTimeAgo",
						"orderType": this.orderType
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/comment/list",
					{
						"cid":this.cid,
						"orderType": this.orderType,
						// "filterType":"whitelist",
						// "filterKeys":"cid,author,content,createdTimeAgo,previewComments,commentCount,replyToComment",
						// "filterAuthorType":"whitelist",
						// "filterAuthorKeys":"uid,nickname,roleName,nicknameColor,avatar",
						// "filterPreviewCommentType":"whitelist",
						// "filterPreviewCommentKeys":"content,author.nickname",
						// "filterReplyToCommentType":"whitelist",
						// "filterReplyToCommentKeys":"cid,content,author.nickname,createdTimeAgo",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listWithoutPage')
						}
					}
				)
			},
			clickOperatingButton(type){
				this.listStatus = 'loading';
				this.orderType = type;
				this.getList();
			},
			clickSubCommentButton(item){
				this.subCid = item.cid;
				this.placeholder = `回复 ${item.author.nickname}`;
				this.focus = true;
			},
			// 点击，位置详情按钮
			cliclGeotagButton(latitude,longitude){
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: (res) => {}
				});
			},
			clickLikeDislikeButton(item,markType){
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":markType,
						"type":"comment",
						"fsid":item.cid
					},
					(res) => {
						if(res.data.code == 0){
							if(markType == 'like'){
								if(item.interaction.likeStatus){
									item.likeCount--
									item.interaction.likeStatus = false;
								}else{
									item.likeCount++
									item.interaction.likeStatus = true;
									if(item.interaction.dislikeStatus){
										item.interaction.dislikeStatus = false;
										item.dislikeCount--
									}
								}
								return
							}
							if(markType == 'dislike'){
								if(item.interaction.dislikeStatus){
									item.dislikeCount--
									item.interaction.dislikeStatus = false;
								}else{
									item.dislikeCount++
									item.interaction.dislikeStatus = true;
									if(item.interaction.likeStatus){
										item.interaction.likeStatus = false;
										item.likeCount--
									}
								}
								return
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					}
				)
			},
			clickEditCommentButton(cid){
				uni.showLoading();
				this.$_request(
					"POST",`/api/fresns/v1/editor/comment/edit/${cid}`,{},
					(res) => {
						uni.hideLoading()
						this.$_to('editor/editor?type=comment&editType=edit&did='+res.data.data.detail.did)
					}
				)
			},
			clickManagesButton(manages,cid){
				let replacedUrl = manages.appUrl.replace(/\{accessToken\}/g, `${this.$_extensionPluginAccessToken()}`)
					.replace(/\{postMessageKey\}/g, `${manages.fskey}`)
					.replace(/\{viewType\}/g, 'detail')
					.replace(/\{uid\}/g, '')
					.replace(/\{pid\}/g, '')
					.replace(/\{cid\}/g, `${cid}`);
				this.$_to("pages/extendWebView?url="+encodeURIComponent(replacedUrl))
			},
			clickDelCommentButton(item){
				uni.showModal({
					title: '提示',
					content: '是否删除本回复？',
					success: (res) => {
						if(res.confirm){
							this.$_request(
								"DELETE",`/api/fresns/v1/comment/${item.cid}`,{},
								(ref) => {
									if(ref.data.code == 0){
										this.listPage = 2;
										this.getList();
									}else{
										uni.showToast({
											title: ref.data.message,
											icon: 'none',
											duration: 2000
										});
									}
								}
							)
						}
					}
				});
			},
			blur(){
				this.focus = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.comment-detail{
	.post-detail{
		background: #FFF;
		padding: 25rpx;
		.post-detail-top{
			display: flex;
			align-items: center;
			height: 85rpx;
			.post-detail-top-info{
				display: block;
				padding: 10rpx;
				font-size: 22rpx;
				line-height: 22rpx;
				color: $placeholder;
				border: 1px solid $border;
				border-radius: 100rpx;
			}
			.post-detail-top-avatar{
				width: 85rpx;
				height: 85rpx;
				flex-shrink: 0;
				margin: 0 15rpx;
				border-radius: 100rpx;
				overflow: hidden;
			}
			.post-detail-top-content{
				height: 85rpx;
				flex: 1;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text{
					font-size: 28rpx;
				}
				text:nth-child(1){
					color: $theme;
					padding-right: 5rpx;
				}
			}
		}
	}
	.comment-detail{
		background: #FFF;
		margin-top: 25rpx;
		padding-top: 1rpx;
		.comment-detail-author{
			display: flex;
			align-items: center;
			margin: 25rpx 25rpx 0 25rpx;
			.comment-detail-avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				flex-shrink: 0;
				border-radius: 100rpx;
				image{
					width: 100%;
				}
			}
			.comment-detail-author-center{
				flex: 1;
				height: 80rpx;
				display: flex;
				justify-content: center;
				flex-flow: column;
				margin: 0 20rpx;
				.author-center-top{
					line-height: 28rpx;
					.comment-detail-nickname{
						font-size: 28rpx;
					}
					.comment-detail-roleName{
						font-size: 22rpx;
						color: $placeholder;
						padding-left: 15rpx;
					}
				}
				.author-center-bottom{
					line-height: 22rpx;
					font-size: 22rpx;
					padding-top: 10rpx;
					color: $placeholder;
					display: flex;
					align-items: center;
					text{
						font-size: 22rpx;
						flex-shrink: 0;
					}
					view{
						display: flex;
						align-items: center;
						line-height: 22rpx;
						padding-left: 15rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text{
							color: $placeholder;
						}
					}
				}
			}
			.author-center-right{
				height: 80rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				view{
					border: 1px solid $theme;
					font-size: 22rpx;
					line-height: 22rpx;
					color: $theme;
					padding: 10rpx 15rpx;
					border-radius: 80rpx;
				}
			}
		}
		.comment-detail-content{
			padding: 25rpx;
		}
		._content-1-file{
			padding: 0 25rpx 25rpx 25rpx;
			._content-1-file-box{
				display: flex;
				flex-wrap: wrap;
				view{
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border: 1px solid $border;
					margin: 10rpx 10rpx 0 0;
					.iconfont{
						display: flex;
						align-items: center;
						justify-content: center;
						background: #000;
						line-height: 50rpx;
						font-size: 50rpx;
						color: #FFF;
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}
	}
	.comment-like-dislike{
		display: flex;
		align-items: center;
		justify-content: center;
		view{
			height: 80rpx;
			padding: 0 50rpx;
			border: 1px solid $border;
			margin: 0 12.5rpx 25rpx 12.5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 500rpx;
			background: $background;
		}
	}
	.comment-administration{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid $border;
		view{
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 25rpx 25rpx 25rpx 0;
			color: $placeholder;
		}
	}
	.comment-detail-textarea{
		border-top: 25rpx solid $background;
		padding: 25rpx 0 0 0;
		textarea{
			margin: 0 25rpx;
			border: 1px solid $border;
			font-size: 28rpx;
			padding: 20rpx 25rpx;
			width:calc(100% - 2rpx - 50rpx - 50rpx);
			min-height: 100rpx;
			background: $background;
		}
		.comment-detail-textarea-bottom{
			display: flex;
			align-items: center;
			justify-content:space-between;
			padding: 20rpx 25rpx 25rpx 25rpx;
			.comment-detail-textarea-bottom-left{
				display: flex;
				align-items: center;
				view{
					line-height: 45rpx;
					padding-right: 20rpx;
					text{
						font-size: 45rpx;
					}
				}
			}
			.comment-detail-textarea-bottom-right{
				display: flex;
				align-items: center;
				view{
					line-height: 22rpx;
					font-size: 22rpx;
					color: #FFF;
					background: $theme;
					padding: 15rpx 25rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
}
// 弹窗 表情
.select-emoji-box {
	display: flex;

	._box-left {
		width: 150rpx;
		max-height: 800rpx;
		background: $border;
		flex-shrink: 0;

		scroll-view {
			width: 150rpx;
			max-height: 800rpx;
			white-space: nowrap;

			view {
				font-size: 28rpx;
				line-height: 28rpx;
				padding: 25rpx;
			}

			._hover {
				background: #FFF;
				color: $theme;
			}
		}
	}

	._box-right {
		flex: 1;
		max-height: 800rpx;

		scroll-view {
			width: 100%;
			max-height: 800rpx;
			white-space: nowrap;
			display: flex;

			._emoji {
				display: flex;
				flex-wrap: wrap;
				padding: 25rpx;

				._emoji-for {
					padding: 12.5rpx;

					text {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 50rpx;
						line-height: 50rpx;
					}

					view {
						width: 65rpx;
						height: 65rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
}
.list-comment{
	padding: 0 25rpx;
	.list-comment-orderType{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 25rpx;
		.list-comment-orderType-box{
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid $border;
			padding: 15rpx;
			border-radius: 100rpx;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				color: $placeholder;
			}
			view:nth-child(1){
				padding-right: 10rpx;
			}
			.list-comment-orderType-box-hover{
				color: $theme;
			}
		}
	}
	.page-more{
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
		font-size: 22rpx;
		line-height: 22rpx;
		padding: 25rpx 0;
	}
	.for{
		display: flex;
		padding: 25rpx 0;
		border-bottom: 1px solid $background;
		._avatar{
			width: 80rpx;
			height: 80rpx;
			border-radius: 100rpx;
			overflow: hidden;
			flex-shrink: 0;
		}
		._right{
			flex: 1;
			padding-left: 15rpx;
			._right-nickname-roleName{
				display: flex;
				align-items: center;
				._nickname{
					font-size: 28rpx;
					flex-shrink: 0;
				}
				._roleName{
					font-size: 22rpx;
					color: $placeholder;
					padding-left: 10rpx;
					flex-shrink: 0;
				}
				._administration{
					display: flex;
					align-items: center;
					view{
						line-height: 22rpx;
						font-size: 22rpx;
						padding-left: 15rpx;
						color: $placeholder;
					}
				}
			}
			._right-content{
				._right-content-replyToComment{
					border: 1px dashed #e4e4e4;
					margin-top: 10rpx;
					margin-bottom: 5rpx;
					background: #fffdf1;
					padding: 15rpx 15rpx 10rpx 15rpx;
					._right-content-replyToComment-top{
						line-height: 22rpx;
						text{
							font-size: 22rpx;
							color: #acacb4;
							padding-right: 10rpx;
						}
					}
					._right-content-replyToComment-bottom{
						font-size: 28rpx;
						line-height: 35rpx;
						color: #acacb4;
						padding-top: 10rpx;
					}
				}
				._content-1{
					margin-top: 10rpx;
				}
				._content-1-time{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $placeholder;
					padding-top: 15rpx;
				}
				._content-2{
					background: $background;
					padding: 15rpx 25rpx 25rpx 25rpx;
					margin-top: 20rpx;
					._content-2-for{
						padding-top: 10rpx;
						._content-2-for-nickname{
							color: $darkBlue;
							padding-right: 10rpx;
						}
						._content-2-for-content{
							color: $placeholder;
						}
					}
					._content-2-for-more{
						color: $darkBlue;
						font-size: 28rpx;
						line-height: 28rpx;
						padding-top: 15rpx;
						text{
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
}
</style>
